<template>
    <div class="customButtonStyle">
        <div class="rx-btn-rowButtons"  v-if="styleButton==1">
            {{ getI18Name(btn, 'name') }}
        </div>
        <div class="rx-btn-rowButtons"  v-else-if="styleButton==2">
            <rx-use-icon v-if="btn.btnIcon" v-model="btn.btnIcon"></rx-use-icon>{{ getI18Name(btn, 'name') }}
        </div>
        <div class="rx-btn-rowButtons"  v-else-if="styleButton==3">
            <a-button size="small" :type="btn.buttonStyle">{{ getI18Name(btn, 'name') }}</a-button>
        </div>
        <div class="rx-btn-rowButtons" v-else-if="styleButton==4">
            <a-button size="small" :type="btn.buttonStyle"><rx-use-icon v-if="btn.btnIcon" v-model="btn.btnIcon"></rx-use-icon>{{ getI18Name(btn, 'name') }}</a-button>
        </div>
        <div class="rx-btn-rowButtons"  v-else-if="styleButton==5">
            <rx-use-icon v-if="btn.btnIcon" v-model="btn.btnIcon"></rx-use-icon>
        </div>
        <div class="rx-btn-rowButtons"  v-else-if="styleButton==6">
            <a-button size="small" :type="btn.buttonStyle"><rx-use-icon v-if="btn.btnIcon" v-model="btn.btnIcon"></rx-use-icon></a-button>
        </div>
    </div>
</template>

<script>
import i18nEdit from "@/views/modules/i18n/i18nEdit"
export default {
    name: "customButtonStyle",
    mixins: [i18nEdit],
    props: {
        customBtnConfig: { type: Object },
        btn:{type:Object}
    },
    data(){
        return{
            styleButton:1,
        }
    },
    created(){
        this.styleButton = JSON.parse(this.customBtnConfig.customBtnJson).styleButton;
    }
}
</script>

<style scoped>
.rx-btn-rowButtons{
    display: flex;
    align-items: center;
    width: 100%;
}
.rx-btn-rowButtons button{
  width: 100%;
}
.rx-btn-rowButtons i{
    margin-right: 2px;
}
</style>